<template>
	<div class="hello">
		<div class="header">
			<h3>猫眼电影</h3>
		</div>
		<div class="box1" v-for="i in arr">
			<div>
				<img :src="i.img"/>
			</div>
			<div class="p">
				<p>{{i.nm}}
					<span class="s" v-if="i.version!=''">
						<span style="font-size: 12px;background: #509fc9;color: #fff;">{{i.version[0]}}</span>
					<span style="font-size: 12px;color: #509fc9;text-align: center;">{{i.version[1]}}</span>
					</span>
				</p>
				<p style="color: #707070;">观众评：<span style="color: #fe9f00;">{{i.sc}}</span></p>
				<p style="color: #707070;">主演{{i.star}}</p>
				<p style="color: #707070;">{{i.showInfo}}</p>
			</div>
			<div class="btn" style="font-size: 0.2rem;">
				<div class="btn_one" :style="{display:i.globalReleased==true?'block':'none'}">购票</div>
				<div class="btn_two" :style="{display:i.globalReleased==false?'block':'none'}">预定</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				arr: []
			}
		},
		mounted() {
			var _this = this
			_this.$http.get('/dianying.php').then(function(res) {
				var arr = [];
				for(var i = 0; i < res.data.movieList.length; i++) {
					var img = res.data.movieList[i].img;
					var sd = res.data.movieList[i].version;
					var nsd = sd.split(' ');
					var nn = [];
					for(var a = 0; a < nsd.length; a++) {
						nn.push(nsd[a]);
					}
					var aa = img.split('/w.h')
					var naa = aa[0] + aa[1];
					res.data.movieList[i].img = naa;
					res.data.movieList[i].version = nn;
					arr.push(res.data.movieList[i])
				}
				console.log(arr)
				_this.arr = arr
			})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		width: 100%;
		height: auto;
		margin-bottom: 50px;
	}
	
	.header {
		width: 100%;
		height: 60px;
		background: #e54847;
	}
	
	.header h3 {
		text-align: center;
		line-height: 60px;
		color: #fff;
		font-size: 22px;
		font-weight: 200;
	}
	
	.box1 {
		width: 100%;
		height: 120px;
		margin: 10 auto;
		display: flex;
		justify-content: space-around;
		position: relative;
	}
	
	.box1>div:nth-child(1) {
		width:80px;
		height: 108px;
	}
	
	.box1>div:nth-child(1)>img {
		width: 100%;
		height: 100%;
	}
	
	.box1>div:nth-child(2) {
		width: 230px;
		height: 100%;
	}
	
	.p {
		line-height:24px;
		padding-left: 10px;
		padding-top: 10px;
	}
	
	.p>p:nth-child(1) {
		font-size: 18px;
		color: #333333;
	}
	
	.p>p:nth-child(2) {
		font-size: 15px;
	}
	
	.p>p:nth-child(3) {
		font-size: 15px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.p>p:nth-child(4) {
		font-size: 15px;
	}
	
	.btn {
		width: 57px;
		height: 32px;
		margin-top: 32px;
		background: #f03d37;
		border-radius: 5px;
		position: relative;
	}
	
	.btn_one {
		width: 57px;
		height: 32px;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		color: #fff;
		background: #f03d37;
		font-size: 10px;
		line-height: 30px;
		border-radius: 5px;
	}
	
	.btn_two {
		width: 57px;
		height: 32px;
		position: absolute;
		text-align: center;
		left: 0;
		top: 0;
		color: #fff;
		background: #3c9fe6;
		font-size: 10px;
		line-height: 30px;
		border-radius: 5px;
	}
	
	.s {
		display: inline-block;
		border: 1px solid #b9d9ea;
		height: 20px;
		line-height: 16px;
		border-radius: 3px;
	}
</style>